<template>
  <van-sticky>
    <van-nav-bar
      title="全部商品"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="showSearch = true"
      v-if="showSearch === false"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-search
      v-model="search"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="showSearch = false"
      v-else
    />
  </van-sticky>

  <van-sticky offset-top="46">
    <van-dropdown-menu swipe-threshold="4">
      <van-dropdown-item
        v-model="typeid"
        :options="TypeOption"
        @change="onMenuOption"
      />
      <van-dropdown-item
        v-model="flag"
        :options="FlagOption"
        @change="onMenuOption"
      />
      <van-dropdown-item
        v-model="orderBy"
        :options="OrderByOption"
        @change="onMenuOption"
      />
      <van-dropdown-item
        v-model="By"
        :options="ByOption"
        @change="onMenuOption"
      />
    </van-dropdown-menu>
  </van-sticky>
  <div class="mainWarp" style="background: #f3f3f3; margin-top: 8px">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <ul class="proul">
          <li v-for="item in list" :key="item.id">
            <router-link
              :to="{
                path: '/product/product/info',
                query: { proid: item.id },
              }"
            >
              <van-image
                width="100%"
                height="120"
                fit="cover"
                :src="item.thumb_cdn"
              />
            </router-link>
            <router-link
              :to="{
                path: '/product/product/info',
                query: { proid: item.id },
              }"
            >
              <p class="tit">{{ item.name }}</p>
            </router-link>
            <div class="price">
              <p>
                ￥{{ item.price }} /
                {{ item.unitid == 1 ? "个" : item.unitid == 3 ? "张" : "台" }}
              </p>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

//标题
const title = ref("");

//下拉刷新
const refreshing = ref(false);
const loading = ref(false); //懒加载状态
const finished = ref(false); //判断是否已下拉加载完成的状态,true完成，false没有
const list = ref([]); //商品列表
const page = ref(1); //当前页面数
const listCount = ref(0); //商品个数
//刷新触发
const onRefresh = () => {
  finished.value = false;
  list.value = [];
  page.value = 1;
  loading.value = true;
  onLoad();
};

//懒加载
const onLoad = () => {
  if (!refreshing.value && list.value.length < listCount.value) {
    page.value = page.value + 1;
  }

  // 如果处于刷新操作
  if (refreshing.value) {
    refreshing.value = false;
  }

  setTimeout(getProductData, 1000);
};

const getProductData = async () => {
  let params = {
    typeid: typeid.value,
    flag: flag.value,
    orderBy: orderBy.value,
    By: By.value,
    search: search.value,
    page: page.value,
  };

  let result = await proxy.$post({
    url: "/product/product/index",
    params,
  });

  if (result.code === 1) {
    finished.value = false;
    loading.value = false;

    list.value.push(...result.data.list);
    listCount.value = result.data.count;

    console.log(list.value);

    if (list.value.length === listCount.value) {
      finished.value = true;
      loading.value = true;

      return false;
    }
  } else {
    finished.value = true;

    return false;
  }
};

//搜索
const search = ref("");
const showSearch = ref(false);
const onSearch = () => {
  refreshing.value = true;
  onRefresh();
};

//点击下拉菜单刷新
const onMenuOption = () => {
  refreshing.value = true;
  onRefresh();
};

//下拉菜单
const typeid = ref(0);
const flag = ref(0);
const orderBy = ref("createtime");
const By = ref("desc");

const TypeOption = ref([{ text: "全部分类", value: 0 }]);

const FlagOption = ref([
  { text: "全部商品", value: 0 },
  { text: "推荐商品", value: 1 },
  { text: "热销商品", value: 2 },
  { text: "新品商品", value: 3 },
]);

const OrderByOption = ref([
  { text: "上架时间", value: "createtime" },
  { text: "商品价格", value: "price" },
  { text: "商品库存", value: "stock" },
]);

const ByOption = ref([
  { text: "降序", value: "desc" },
  { text: "升序", value: "asc" },
]);

onBeforeMount(() => {
  getTypeData();
});

//下拉菜单分类导入
const getTypeData = async () => {
  let result = await proxy.$post({
    url: "product/product/type",
  });

  if (result.code === 1) {
    let data = [];
    for (let item of result.data) {
      data.push({
        text: item.name,
        value: item.id,
      });
    }

    data.unshift({
      text: "全部分类",
      value: 0,
    });

    TypeOption.value = data;
  }
};

//返回上一级
const onClickLeft = () => {
  proxy.$router.back();
};
</script>